<template>
  <div>
    <el-card class="form-container" shadow="never">
      <el-form :model="Article"
               :rules="rules"
               ref="homeAdvertiseFrom"
               label-width="150px"
               size="small">
        <el-form-item label="商品名称：" prop="name">
          <el-input v-model="Article.name" class="input-width"></el-input>
        </el-form-item>
        <el-form-item label="卖家姓名：" prop="owner">
          <el-input v-model="Article.owner" class="input-width"></el-input>
        </el-form-item>
        <el-form-item label="商品分类：">
          <el-cascader
            ref="cascaderAddr"
            clearable
            v-model="Article.select"
            :options="productCateOptions">
          </el-cascader>
        </el-form-item>
        <el-form-item label="上传时间：" prop="startTime">
          <el-date-picker
            type="datetime"
            placeholder="选择日期"
            v-model="Article.startTime"></el-date-picker>
        </el-form-item>
          <el-form-item label="商品图片：">
            <el-upload
              class="upload-facepic"
              action="http://localhost:8080/advertise/uploadfile"
              :on-preview="handlePreview"
              :on-remove="handleRemove"
              :before-remove="beforeRemove"
              multiple
              ref="upload"
              :auto-upload="true"
              :limit="2"
              :on-change="handleChange"
              :on-success="handleSuccess"
              :on-exceed="handleExceed"
              :file-list="fileList"
              :data="form">
              <el-button size="small" type="primary">点击上传</el-button>
              <div slot="tip" class="el-upload__tip">只能上传jpg/jpeg/png文件，且不超过500kb</div>
            </el-upload>
          </el-form-item>

        <el-form-item label="价格：">
          <el-input v-model="Article.price" class="input-width"></el-input>
        </el-form-item>
        <el-form-item label="商品成色：" prop="abrasion">
          <el-input v-model="Article.abrasion" class="input-width"></el-input>
        </el-form-item>
        <el-form-item label="商品详情：">
          <el-input
            class="input-width"
            type="textarea"
            :rows="5"
            placeholder="请输入内容"
            v-model="Article.introduction">
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit()">提交</el-button>
          <el-button v-if="!isEdit" @click="resetForm(Article)">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>

  </div>
</template>

<script>
export default {
  name: "addarticle",
  data() {
    return {
        selected: '',
        editForm: {}, // 修改信息的表单数据


      Article: {
        name: 'asdfsadf',
        startTime: '2021-10-09 20:33:08',
        introduction: '',
        price: '',
        select: '',
        abrasion: '',
        owner: '',
        picname: '',
        path: ''
      },
      rules: {
        name: [
          {required: true, message: '请输入商品名称', trigger: 'blur'},
          {min: 2, max: 140, message: '长度在 2 到 140 个字符', trigger: 'blur'}
        ],
        abrasion: [
          {required: true, message: '请输入商品成色', trigger: 'blur'}
        ],
        startTime: [
          {required: true, message: '请选择开始时间', trigger: 'blur'}
        ],
        endTime: [
          {required: true, message: '请选择到期时间', trigger: 'blur'}
        ],
        pic: [
          {required: true, message: '请选择广告图片', trigger: 'blur'}
        ]
      },
      selectProductCateValue: null,
      productCateOptions: [
        {
          value: '1',
          label: '数码'
        }, {
          value: '2',
          label: '食品'
        }, {
          value: '3',
          label: '进口'
        }, {
          value: '4',
          label: '女装'
        }, {
          value: '5',
          label: '鞋靴'
        }, {
          value: '6',
          label: '母婴'
        }, {
          value: '10',
          label: '男装'
        }, {
          value: '14',
          label: '电器'
        }, {
          value: '13',
          label: '洗护'
        }
      ],
    }
  },
  methods: {
    handleChange:function (file, fileList) {
      this.facepicUrlShow = file.name;
    },
    handleSuccess(res) {
      console.log(res)
      this.Article.path = res.path;
      this.Article.picname = res.name;
      this.$message.success('图片上传成功')
    },
    onSubmit() {
      this.api({
        url: "/article/addArticle",
        method: "post",
        data: this.Article
      }).then(data => {
        this.listLoading = false;
        this.list = data.list;
        console.log(this.list);
        this.totalCount = data.totalCount;
      })
    },

  }

}

</script>

<style scoped>
.form-container {
  position: absolute;
  left: 0;
  right: 0;
  width: 720px;
  padding: 35px 35px 15px 35px;
  margin: 20px auto;
}
</style>
